<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霓虹聊天室 - 注册</title>
    <link rel="stylesheet" href="/static/css/register.css">
    <link rel="stylesheet" href="/static/js/layer/theme/default/layer.css">
    <script src="/static/js/jquery-3.7.1.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.global.js"></script>
</head>
<body>
    <div class="register-container">
        <!-- 装饰性背景元素 -->
        <div class="bg-glow bg-glow-1"></div>
        <div class="bg-glow bg-glow-2"></div>
        <div class="bg-glow bg-glow-3"></div>

        <div class="register-card">
            <h1 class="neon-title">创建账号</h1>
            <p class="tagline">加入霓虹聊天社区</p>

            <form class="register-form">
                <div class="input-group">
                    <label for="username">
                        <i class="fa fa-user"></i>
                    </label>
                    <input type="text" id="username" placeholder="用户名" v-model="user.username">
                </div>

                <div class="input-group">
                    <label for="email">
                        <i class="fa fa-envelope"></i>
                    </label>
                    <input type="email" id="email" placeholder="电子邮箱" v-model="user.email">
                </div>

                <div class="input-group">
                    <label for="password">
                        <i class="fa fa-lock"></i>
                    </label>
                    <input type="password" id="password" placeholder="设置密码" v-model="user.password">
                </div>

                <div class="input-group">
                    <label for="confirm-password">
                        <i class="fa fa-lock"></i>
                    </label>
                    <input type="password" id="confirm-password" placeholder="确认密码" v-model="rePassword">
                </div>

                <div class="terms-agreement">
                    <label class="custom-checkbox">
                        <input type="checkbox" @change="agree">
                        <span class="checkmark"></span>
                        <span class="label-text">我同意<a href="#" class="neon-link">服务条款</a>和<a href="#" class="neon-link">隐私政策</a></span>
                    </label>
                </div>

                <button type="button" class="register-btn neon-btn" @click="createAccount">注册账号</button>

                <div class="login-prompt">
                    已有账号? <a href="{% url 'login' %}" class="neon-link">立即登录</a>
                </div>
            </form>
        </div>
    </div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                user: {
                    username: '',
                    email: '',
                    password:''
                },
                rePassword:'',
                pool:false
            }
        },
        methods:{
            createAccount(){
                if(this.user.username === ''){
                    layer.msg('请输入用户名')
                    return
                }
                if(this.user.email === ''){
                    layer.msg('请输入邮箱')
                    return
                }
                if(this.user.password === ''){
                    layer.msg('请输入密码')
                    return
                }
                if(this.rePassword === ''){
                    layer.msg('请输入确认密码')
                    return
                }
                if(this.rePassword !== this.user.password){
                    layer.msg('两次密码不一致')
                    return
                }
                if(!this.pool){
                    layer.msg('请勾选我同意服务条款')
                    return
                }
                axios.post("{% url 'register' %}",this.user,{
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(ret => {
                    if(ret.data.code === 200){
                        layer.msg(ret.data.msg,{time:1000},function (){
                            window.location.href="login"
                        })
                    }else{
                        layer.msg(ret.data.msg)
                    }
                })
            },
            agree(){
                this.pool = !this.pool;
            }
        }
    }).mount('.register-container')
</script>
</html>